<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}-{$Think.lang.web_name}</title>
    <meta name="keywords" content="网站制作,博客,个人博客,个人网站,网站建设,网站模板">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {include file="comm/header"/}
    <link type="text/css" rel="stylesheet" href="__CSS__/home_category_article.css">
</head>
<body>
{include file="comm/nav_top"/}
<!-- content start-->
<div class="container">
    <nav class="s-container-nav">
        <div class="col-sm-9">
            <h4><i class="fa fa-circle"></i> {$category.cate_name}</h4>
        </div>
        <div class="col-sm-3">
            <i class="fa fa-bars fa-2x" style="display: inline-block;line-height: 50px;width: 100%;text-align: center;color: #1f9a81;"></i>
            <ul>
                {foreach name="category_list" key="key" id="v" index="i"}
                {if $v.cate_id == $category.cate_id}
                <li><a href="javascript:;" style="background: #2b2b2b;">{$v.cate_name}</a></li>
                {else}
                <li><a href="/Index/category_article/id/{$v.cate_id}">{$v.cate_name}</a></li>
                {/if}
                {/foreach}
                <!--<li><a href="">nav1</a></li>
                <li><a href="">nav2</a></li>
                <li><a href="">nav3</a></li>-->
            </ul>
        </div>
    </nav>
    <div class="s-content">
        {if is_array($article_list) && count($article_list)>0}
        {foreach name="$article_list" key="key" id="v" index="i"}
        <div class="col-sm-12 s-article-list">
            <div class="s-article-img-box">
                <img src="{$v.meida_img}">
            </div>
            <div class="col-sm-6">
                <h4>{$v.media_title}</h4>
                <p>{$v.media_desc|raw}</p>
                <div class="col-sm-12">
                    <a href="/Index/article/id/{$v.media_id}/cate_id/{$v.media_category_id}">
                        <i class="fa fa-plus"></i> 文章阅读
                    </a>
                </div>
            </div>
        </div>
        {/foreach}
        {else}
        <div class="col-sm-12" style="margin: 30px;"><p align="center">暂无数据！</p></div>
        {/if}
        <!--<div class="col-sm-12 s-article-list">
            <div class="s-article-img-box">
                <img src="">
            </div>
            <div class="col-sm-6">
                <h4>title</h4>
                <p>desc</p>
            </div>
        </div>-->
        <div id="initPage"></div>
    </div>
</div>

<canvas id="canvas1" class="canvas" style="position: fixed;top:0;left:0;z-index: -1;background: initial;"></canvas>
<!-- content end -->
{include file="comm/footer"/}
<script type="text/javascript" src="__JS__/canvas.js"></script>
<script type="text/javascript" src="__JS__/initPage.js"></script>
<script type="text/javascript">
    canvas1.width=(document.documentElement.clientWidth||window.innerWidth);
    canvas1.height=(document.documentElement.clientHeight||window.innerHeight);
    Context.createCanvas(canvas1,"abc");
    Events.add(window,"resize",function (e) {
        canvas1.width=(document.documentElement.clientWidth||window.innerWidth);
        canvas1.height=(document.documentElement.clientHeight||window.innerHeight);
    });
    function drawCanvas(C){
        (C.w)||(C.w=1000);
        (C.h)||(C.h=600);
        (C.num)||(C.num=100);
        (C.name)||(C.name="ctx");
        var O={
            // 粒子的初始位置(二维数组[[x,y,r]])
            xyr:[]
            //粒子的运动速度(二维数组[[x,y]])
            ,v:[]
            //粒子的当前位置(x,y坐标,二维数组[[x,y]])
            ,p:[]
            ,w:C.w
            ,h:C.h
            // 粒子的数量
            ,num:C.num
            ,mouseX:100
            ,mouseY:100
            ,init:function(){
                for(var i=0;i<this.num;i++){
                    var x=~~(Math.random()*this.w),y=~~(Math.random()*this.h),r= Math.random()*1+0.5;
                    this["xyr"][i]=[x,y,r];
                    this.v[i]=[~~(Math.random()*5-4),~~(Math.random()*5-4)];
                    this.p[i]=[x,y,r];
                }

            }
            ,draw:function(){
                //console.log(this);
                Context.clearRect(C.name);
                var condition=[],j=0;
                for(var i=0;i<this.num;i++){
                    //console.log(this.p[i],this.v[i]);

                    //console.log(this.p[i]);
                    Context.drawPath(C.name,{
                        type:"arc"
                        ,colorFill:"color"
                        // ,x1:0
                        // ,y1:0
                        // ,x2:1000
                        // ,y2:1000
                        // ,xy:[[0,0],[canvas1.width,0],[canvas1.width,canvas1.height],[0,canvas1.height]]
                        ,x:this.p[i][0]=this.p[i][0]+this.v[i][0]
                        ,y:this.p[i][1]=this.p[i][1]+this.v[i][1]
                        ,r:this.p[i][2]
                        ,position_color:[[0,"rgba("+random(0,255)+","+random(0,255)+","+random(0,255)+",1)"]]
                        ,is_fill:true
                    });
                    (this.p[i][0]<0 || this.p[i][0]>this.w)&&(this.v[i][0]=-this.v[i][0]);
                    (this.p[i][1]<0 || this.p[i][1]>this.h)&&(this.v[i][1]=-this.v[i][1]);
                    // if (this.p[i][0]<0 || this.p[i][0]>this.w || this.p[i][1]<0 || this.p[i][1]>this.h) {
                    // console.log(this.xyr[i],this.p[i]);
                    // this.p[i][0]=this.xyr[i][0];
                    // this.p[i][1]=this.xyr[i][1];
                    // }
                    /*粒子连线 鼠标 begin*/
                    if((document.documentElement.clientWidth||window.innerWidth)<750){continue;}
                    if (this.x2(this.mouseX-this.p[i][0])+this.x2(this.mouseY-this.p[i][1])<=this.x2(200)) {
                        Context.drawPath(C.name,{
                            type:"lineTo"
                            ,colorFill:"color"
                            // ,x1:0
                            // ,y1:0
                            // ,x2:1000
                            // ,y2:1000
                            ,xy:[[this.mouseX,this.mouseY],[this.p[i][0],this.p[i][1]]]
                            // ,x:this.p[i][0]=this.p[i][0]+this.v[i][0]
                            // ,y:this.p[i][1]=this.p[i][1]+this.v[i][1]
                            // ,r:this.p[i][2]
                            ,position_color:[[0,"rgba("+random(0,255)+","+random(0,255)+","+random(0,255)+",1)"]]
                            ,is_fill:false
                        });
                        /*粒子间连线 begin*/
                        for(var k=0;k<this.num;k++){
                            if (this.x2(this.p[i][0]-this.p[k][0])+this.x2(this.p[i][1]-this.p[k][1])<=this.x2(100)) {
                                Context.drawPath(C.name,{
                                    type:"lineTo"
                                    ,colorFill:"color"
                                    // ,x1:0
                                    // ,y1:0
                                    // ,x2:1000
                                    // ,y2:1000
                                    ,xy:[[this.p[i][0],this.p[i][1]],[this.p[k][0],this.p[k][1]]]
                                    // ,x:this.p[i][0]=this.p[i][0]+this.v[i][0]
                                    // ,y:this.p[i][1]=this.p[i][1]+this.v[i][1]
                                    // ,r:this.p[i][2]
                                    ,position_color:[[0,"rgba("+random(0,255)+","+random(0,255)+","+random(0,255)+",1)"]]
                                    ,is_fill:false
                                });
                            }
                        }
                        /*粒子间连线 end*/
                    }
                    /*粒子连线 鼠标 end*/
                }
            }
            ,lineTo:function(C){
                (C.size)||(C.size=100);
                (C.mouseX)||(C.mouseX=100);
                (C.mouseY)||(C.mouseY=100);
                if (this.x2(C.mouseX-C.x)+this.x2(C.mouseY-C.y)<=this.x2(C.size)) {
                    Context.drawPath("abc",{
                        type:"lineTo"
                        ,colorFill:"color"
                        // ,x1:0
                        // ,y1:0
                        // ,x2:1000
                        // ,y2:1000
                        ,xy:[[C.mouseX,C.mouseY],[C.x,C.y]]
                        // ,x:this.p[i][0]=this.p[i][0]+this.v[i][0]
                        // ,y:this.p[i][1]=this.p[i][1]+this.v[i][1]
                        // ,r:this.p[i][2]
                        ,position_color:[[0,"rgba("+random(0,255)+","+random(0,255)+","+random(0,255)+",1)"]]
                        ,is_fill:false
                    });
                }
            }
            ,x2:function(number){
                return typeof number ==="number" ? number*number : 0;
            }

        };
        this.O=O;
        return O;

    }
    var ctx1=new drawCanvas({w:canvas1.width,h:canvas1.height,name:"abc"});
    ctx1.init();
    ((document.documentElement.clientWidth||window.innerWidth)<750) ? ctx1.init(ctx1.num=80) : ctx1.init(ctx1.num=150);
    setInterval(function(){
        ctx1.draw.call(ctx1);
    },1000/30);
    window.onmousemove=function(event){
        ctx1.mouseY=event.clientY;
        ctx1.mouseX=event.clientX;
    }


    pageUtil.initPage('initPage',
	    {
	    	//总页数，一般从回调函数中获取。如果没有数据则默认为1页	（数据库影响行数）
	        totalCount:{$article_list_count}
	        //初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
	        ,curPage:{$page}
	        //分页栏显示的数量
	        ,showCount:5
	        //自定义分页数，默认[5,10,15,20,50] (每页显示的行数)
	        ,pageSizeList:[1,5,10,15,20,25,30]
	        //默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个 (每页显示的行数)
	        ,defaultPageSize:10
	        ,isJump:false//是否包含跳转功能，默认false
	        //isPageNum:true,//是否显示分页下拉选择，默认false
	        ,isPN:true//是否显示上一页和下一面，默认true
	        ,isFL:true//是否显示首页和末页，默认true
	        ,jump:function(curPage,pageSize){
	        //跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0用到this请自行使用bind方法
	        //点击事件
	            console.log(curPage,pageSize);
                location.href="/Index/category_article/id/{$category.cate_id}/page/"+curPage;
	        }
	    }
    );
</script>
</body>
</html>